import 'package:ca_dsp_pro/src/modules/crossover/my_cross_controller.dart';
import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../tool/assets.dart';

class CrossItem extends StatefulWidget {
  Passmodel pass;
  CrossItem({super.key, required this.pass});

  @override
  State<CrossItem> createState() => _CrossItemState();
}

class _CrossItemState extends State<CrossItem> {
  late kTooltip _tooltip;
  final controller = Get.find<MyCrossController>();
  @override
  void initState() {
    super.initState();
  }

  Widget buildImgButton(bool isAdd) {
    return Container(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            widget.pass.select = true;
            globalController.updatePassFreqWithAddOrSub(widget.pass, isAdd: isAdd);
          },
          child: Center(
            child: Image.asset(isAdd ? assets.add : assets.sub, width: 25, height: 25),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ///左边文字
          Container(
            width: 30,
            color: Color_bg_view2,
            child: Center(child: RotatedBox(quarterTurns: 3, child: Text(widget.pass.ishigh ? 'HIGH' : 'LOW'))),
          ),

          ///右边整体部分
          Expanded(
              child: Column(
            spacing: 1,
            children: [
              ///上部分
              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.red,
                  child: Row(
                    spacing: 20,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: List.generate(2, (index) {
                      return Expanded(
                        child: Container(
                          padding: const EdgeInsets.all(2),
                          child: Row(
                            spacing: 5,
                            children: [
                              SizedBox(
                                width: 50,
                                child: Center(
                                  child: Text(
                                    index == 0 ? 'TYPE' : 'SLOPE',
                                    style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constranits) {
                                  final list = index == 0 ? controller.types : controller.slopelist;
                                  return InkWell(
                                    onTap: () {
                                      _tooltip = kTooltip(
                                          context: context,
                                          autoHidden: false,
                                          child: Container(
                                            color: Color_bg_view2,
                                            height: (20 * list.length).toDouble(),
                                            width: constranits.maxWidth,
                                            child: Column(
                                              children: List.generate(list.length, (i) {
                                                return Obx(() {
                                                  bool iscurrent = false;
                                                  if (widget.pass.ishigh) {
                                                    iscurrent = index == 0
                                                        ? controller.typeIndex_high.value == i
                                                        : controller.slopeIndex_high.value == i;
                                                  } else {
                                                    iscurrent = index == 0
                                                        ? controller.typeIndex_low.value == i
                                                        : controller.slopeIndex_low.value == i;
                                                  }
                                                  final decoration = !iscurrent
                                                      ? null
                                                      : BoxDecoration(
                                                          border:
                                                              BoxBorder.all(color: Colors.red.withAlpha(50), width: 0),
                                                          boxShadow: [
                                                              BoxShadow(
                                                                  color: Colors.red.withAlpha(200),
                                                                  blurRadius: 5,
                                                                  spreadRadius: 2)
                                                            ]);
                                                  return Container(
                                                      decoration: decoration,
                                                      child: GestureDetector(
                                                        child: Center(child: Text(list[i])),
                                                        onTap: () {
                                                          index == 0
                                                              ? controller.chooseType(widget.pass, i)
                                                              : controller.chooseSlope(widget.pass, i);
                                                        },
                                                      ));
                                                });
                                              }).toList(),
                                            ),
                                          ));
                                      _tooltip.show(completion: () => setState(() {}));
                                    },
                                    child: Container(
                                      color: Color_bg_view2,
                                      child: Row(
                                        children: [
                                          Expanded(
                                              child: Transform.translate(
                                            offset: const Offset(25, 0), // 往右移动30px
                                            child: Text(index == 0
                                                ? widget.pass.type!.name
                                                : '${widget.pass.type!.slope}dB/oct'),
                                          )),
                                          Container(
                                            width: 20,
                                            child: Center(
                                              child: Image.asset(assets.arrow_down, width: 20, height: 10),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  );
                                }),
                              ),
                            ],
                          ),
                        ),
                      );
                    }),
                  ),
                ),
              ),

              ///下部分
              Flexible(
                flex: 3,
                child: Container(
                  color: Colors.red,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      ///减按钮
                      Flexible(flex: 1, child: buildImgButton(false)),

                      ///输入框
                      Flexible(
                        flex: 2,
                        child: Container(
                            height: 30,
                            color: Color_bg_view2,
                            child: NumTextfield(
                              color: Color_bg_view2,
                              enabled: true,
                              decimal: 0,
                              min: widget.pass.min_freq.toDouble(),
                              max: widget.pass.max_freq.toDouble(),
                              value: widget.pass.freq.toDouble(),
                              step: 1,
                              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white),
                              onChange: (p0) {
                                globalController.updatePassFreq(widget.pass, p0.intValue, isSend: true);
                              },
                            )),
                      ),

                      ///右按钮
                      Flexible(flex: 1, child: buildImgButton(true))
                    ],
                  ),
                ),
              )
            ],
          ))
        ],
      ),
    );
  }
}
